<template>
  <div class="feed">
    <WaterFall :cols="2" :data-list="list" @loadmore="loadmore">
      <div v-for="(item, index) in list" :key="index" class="feed__list-item">
        <FeedItem :item="item" />
      </div>
    </WaterFall>
  </div>
</template>

<script>
import { getHomeRecommend } from '@/utils/api'
import WaterFall from './Waterfall.vue'
import FeedItem from './FeedItem.vue'

export default {
  name: 'Feed',
  components: {
    WaterFall,
    FeedItem
  },
  data() {
    return {
      list: [],
      pageIndex: 1,
      pageSize: 10
    }
  },
  created() {
    this.getList()
  },
  methods: {
    loadmore() {
      this.pageIndex += 1
      this.getList()
    },
    getList() {
      getHomeRecommend({ pageIndex: this.pageIndex, pageSize: this.pageSize }).then((res) => {
        this.list.push(...res.result)
      }).catch((err) => {
        console.log('接口获取失败，失败信息：', err.message)
      })
    }
  }

}
</script>
<style lang="less" scoped>
.feed {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px 18px;
  margin: 23px -18px 0 -18px;
  background-color: #F0F0F0;
  border-radius: 18px;
  &__list-item{
  margin: 10px;
  border-radius: .08rem;
}
}

</style>
